<style lang="sass">
    @import "../../style/config.scss";
    .gw-goods{

    }

</style>

<template>
    <section class="gw-goods">
        <div class="gw-center">
            <div class="hm-flex">
                <div class="dir">
                    <li v-for="(item,index) in list" :class="{'active':$route.params.id==index}" @click="link(index)">{{ item.title }}</li>
                </div>
                <div class="hm-flex-1 content">
                    <el-table :data="item" border style="width:100%" >
                        <el-table-column align="center" prop="key" label="品种名称"></el-table-column>
                        <el-table-column align="center" prop="val" :label="title"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    data(){
        return {            
            list : [
                {
                    title : '美原油',
                    table : [
                        'CL',
                        '1000桶',
                        '0.01点',
                        '0.01=10美元',
                        '最小1手',
                        '浮动(0.01~0.05个点)',
                        '60美元/手',
                        '1000美元/手',
                        '风险率（当前权益/初始权益） ≤ 30%',
                        '周一至周五每日06:00到05:00（冬令时延后1小时）',
                        '美原油最后交易日为NYMEX交易所最后交易日的前两个交易日，所有在最后交易日当天的交易时间完结时仍持有仓位将会在收盘前15分钟强制平仓。',
                    ]
                },
                {
                    title : '美黄金',
                    table : [
                        'GC',
                        '100盎司',
                        '0.1点',
                        '0.1=10美元',
                        '最小1手',
                        '浮动(0.1~0.5个点)',
                        '60美元/手',
                        '1000美元/手',
                        '风险率（当前权益/初始权益） ≤ 30%',
                        '周一至周五每日06:00到05:00（冬令时延后1小时）',
                        '黄金最后交易日为NYMEX交易所最后交易日的前两个交易日，所有在最后交易日当天的交易时间完结时仍持有仓位将会在收盘前15分钟强制平仓。',
                    ]
                },
                {
                    title : '美白银',
                    table : [
                        'SI',
                        '5000盎司',
                        '0.005点',
                        '0.005=25美元',
                        '最小1手',
                        '浮动(0.005~0.025个点)',
                        '80美元/手',
                        '714美元/手',
                        '风险率（当前权益/初始权益） ≤ 30%',
                        '周一至周五每日06:00到05:00（冬令时延后1小时）',
                        '白银最后交易日为NYMEX交易所最后交易日的前两个交易日，所有在最后交易日当天的交易时间完结时仍持有仓位将会在收盘前15分钟强制平仓。',
                    ]
                },
            ]
        }
    },
    computed: {
        title(){
            let index = this.$route.params.id
            let list = this.list[index]
            return list ? list.title : ''
        },
        item(){
            let index = this.$route.params.id
            let list = this.list[index]
            console.log(this.list[index])
            let table = ["品种代码","合约单位","最低价格波幅"," 最小波动价值","单次下单手数（最小）","差价","手续费","即市保证金","强制平仓","交易时间","合约到期日"]
            if(list){
                let work = []
                for(let i=0;i<table.length;i++){
                    work.push({
                        key : table[i],
                        val : list.table[i] || '',
                    })
                }
               return work
            }
            return []
        },
    },
    methods : {
        link(id){
            this.$router.replace({name:this.$route.name,params:{id}})
        }
    },
    components : {

    },
    mounted(){

    }
}
</script>
